<template>
  <div class="box">
    <h3 class="header">
      <span>人员技能</span>
      <el-button type="primary" @click="add('新增人员技能', 5, '0')" >新增人员技能</el-button>
    </h3>
    <el-table :data="skillTagList">
        <el-table-column prop="id" algin="center" label="ID">
        </el-table-column>
        <el-table-column prop="dValue" algin="center" label="人员技能名称">
        </el-table-column>
        <el-table-column label="操作" algin="center" width='220'>
          <template slot-scope="scope">
            <el-button @click="handleEdit(scope.row, '编辑人员技能')" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row, 'getGroup', 5, 'skillTagList')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    <add-book :title="title" :dialogVisible.sync="dialogVisible" :isEdit="isEdit" :label="label" v-on:control="control" :input="input" :params="params"></add-book>
    <div class="demonstration-box" v-show="false">
        <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageParams.size"
          layout="total, prev, pager, next"
          :total="pageParams.totalCount"
        ></el-pagination>
      </div>
  </div>
</template>

<script>
const queryString = require('querystring')
import page from 'data/page'
import addBook from '../../components/addBook'
import { skillTagList } from 'data/listBody';
import dict from '@/minxs/dict'
export default {
  name: 'hosLevel',
  mixins: [page, dict],
  data() {
    return {
      title: '新增人员技能',
      label: '请输入人员技能名称',
      input: '',
      dialogVisible: false,
      skillTagList,
      currentPage: 1
    }
  },
  components: {
    addBook
  },
  created() {
    this.getGroup(5, 'skillTagList')
  },
  methods: {
    control(val) {
      this.dialogVisible = false
      if (val) this.getGroup(5, 'skillTagList')
    }
  }
}
</script>

<style lang="less" scoped>
.box{
  padding-left: 20px;
}
.header{
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  display: flex;
  justify-content: space-between
}
</style>
